<template>
  <el-row class="tac">
    <el-menu
      :default-active="defaultActive"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      >

      <div v-if="isShow1">
        <el-menu-item  
        @click="clickMunu(item)" 
        v-for="item in adminMenu" 
        :key="item.name" 
        :index="item.name">
          <i :class="`el-icon-${item.icon}`"></i>
          <span slot="title">{{ item.label }}</span>
        </el-menu-item>
        
      </div>
      <div v-if="isShow2">
        <el-menu-item 
        @click="clickMunu(item)" 
        v-for="item in userMenu" 
        :key="item.name" 
        :index="item.name">
            <i :class="`el-icon-${item.icon}`"></i>
            <span slot="title">{{ item.label }}</span>
        </el-menu-item>
      </div>
      
    </el-menu>
</el-row>
</template>

<script>
export default {
   name:'CommonAside',
   components: {  },
   data() {
      return {
         menuData:[
          {path:'/user/room',name:'UserRoom',label:'房间预定',icon:'s-home',url:'user', },
          {path:'/user/user',name:'UserUser',label:'个人信息',icon:'document',url:'user'},
          {path:'/user/book',name:'UserBook',label:'个人预定信息',icon:'document',url:'user'},
          {path:'/user/bill',name:'UserBill',label:'个人账单信息',icon:'document',url:'user'},
          {path:'/admin/room',name:'AdminRoom',label:'房间信息',icon:'s-home',url:'admin', },
          {path:'/admin/user',name:'AdminUser',label:'用户信息',icon:'document',url:'admin', },
          {path:'/admin/employee',name:'AdminEmp',label:'员工信息',icon:'document',url:'admin', },
          {path:'/admin/book',name:'AdminBook',label:'预定信息',icon:'document',url:'admin', },
          {path:'/admin/bill',name:'AdminBill',label:'账单信息',icon:'document',url:'admin', },
        ],
        defaultActive:'0',//当前激活菜单的index
        
      }
   },
   computed:{
      adminMenu(){
        return this.menuData.filter(item=>item.url == 'admin')
      },
      userMenu(){
        return this.menuData.filter(item => item.url =='user')
      },
      isShow1(){
        if(this.$route.matched[0].name=='Admin'){
          return true
        }else{
          return false
        }
      },
      isShow2(){
        if(this.$route.matched[0].name=='User'){
          return true
        }else{
          return false
        }
      }
   },
   watch:{
    $route(){
      this.setCurrentRoute()
      // console.log('看看这是什么---watch----',this.defaultActive);
      
    }
   },
   methods:{
      //点击菜单
      clickMunu(item){
        //当页面的路由与跳转的路由不一致才跳转
        if(this.$route.path !== item.path){
          this.$router.push(item.path)
        }
      },
      setCurrentRoute(){
        this.defaultActive = this.$route.name //监听当前路由状态并激活当前路径
        // console.log('看看这是什么----methods---',this.defaultActive);
        
      }
    
   },
   mounted() {
  
   },
   created(){
    this.setCurrentRoute()
    // console.log('看看这是什么---created----',this.defaultActive);
    
   }
}
</script>

<style lang="less" scoped>
.el-menu{
        height:  calc(100vh - 70px);
        border-right: none;
        
}
</style>